<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Admin</title>
<link type="text/css" rel="stylesheet" href="Css/Style.css" />
<link type="text/css" rel="stylesheet" href="Css/Definition.css" />
<link type="text/css" rel="stylesheet" href="Css/Input.css" />
<link type="text/css" rel="stylesheet" href="Css/Message.css" />
<link type="text/css" rel="stylesheet" href="Css/Text.css" />
<script type="application/javascript" language="javascript" src="JS/jquery.js"></script>
<script type="application/javascript" language="javascript" src="JS/jquery-ui.js"></script>
<script>
function quick() {
    $("#menu ul ul ").css({ display: "none" });
    $("#menu ul li").hover(function () {
	$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
    }, function () {
        $(this).find('ul:first').css({ visibility: "hidden" });
    });
}

$(document).ready(function () {
    quick();
	$(".table th#sort").click(function(){
		var img = $(this).find("img");
		if ($(img).attr("src") != "Image/sort_desc.png") {
			$(img).attr({
				src:"Image/sort_desc.png",
				title:"Sort Desc"
			});
		} else {
			$(img).attr({
				src:"Image/sort_asc.png",
				title:"Sort Asc"
			});	
		}
	});
	$(".menu ul li a").hover(function(){
		$(this).animate({
			marginLeft:"+=10",			 
		});
	}, function(){
		$(this).animate({
			marginLeft:0,			 
		});
	});
	$(".menu > .title").click(function(){						   
		var mainMenuContent = $(this).parent().find("> ul");
		var ul = $(".menu > ul");
		$(ul).slideUp();
		$(mainMenuContent).slideToggle('slow');
	});
	
});
</script>
</head>

<body>
	<div id="header">
    	<div id="logo">
			<a href="#"><img src="Image/logo.png" /></a>
        </div>
    	<div id="user">
        	<ul>
            	<li class="first"><a href="#"><span>Account</span></a></li>
                <li><a href="#"><span>Message(0)</span></a></li>
                <li><a href="#"><span>Logout</span></a></li>
                <li class="last highlight"><a href="#"><span>Viewsite</span></a></li>
            </ul>
        </div>
        <div id="headerInner">
        	<div id="home">
            	<a href="#"></a>
            </div>
            <div id="menu">
            	<ul>
                    <li><a href="#"><span class="icon"><img src="Image/product.png" alt="Product" /></span><span>Product</span></a>
                    	<ul style="display:none;">
							<li><a href="#">Full, Column</a></li>
							<li><a href="#">Full, No Column</a></li>
							<li>
								<a href="#" class="childs">Sales</a>
								<ul style="display: none;">
									<li><a href="">Today</a></li>
									<li><a href="">Yesterday</a></li>
									<li class="last">
										<a href="#" class="childs">Archive</a>
										<ul style="display: none;">
											<li><a href="">Last Week</a></li>
											<li class="last"><a href="">Last Month</a></li>
										</ul>
									</li>
								</ul>
							</li>
							<li class="last">
								<a href="#" class="childs">Offers</a>
								<ul style="display: none;">
									<li><a href="">Coupon Codes</a></li>
									<li class="last"><a href="">Rebates</a></li>
								</ul>
							</li>
						</ul>
                    </li>
                    <li><a href="#"><span class="icon"><img src="Image/product.png" alt="Product" /></span><span>Category</span></a>
                    	<ul style="visibility: hidden; display: block;">
							<li><a href="#">Full, Column</a></li>
							<li><a href="#">Full, No Column</a></li>
							<li><a href="#">Fixed, Column</a></li>
							<li class="last"><a href="#">Fixed, No Column</a></li>
						</ul>
                    </li>
                    <li><a href="#"><span class="icon"><img src="Image/product.png" alt="Product" /></span><span>Hello</span></a>
                    	<ul style="visibility: hidden; display: block;">
							<li><a href="#">Full, Column</a></li>
							<li><a href="#">Full, No Column</a></li>
							<li><a href="#">Fixed, Column</a></li>
							<li class="last"><a href="#">Fixed, No Column</a></li>
						</ul>
                    </li>
                    <li><a href="#"><span class="icon"><img src="Image/product.png" alt="Product" /></span><span>Setting</span></a></li>
                    <li><a href="#"><span class="icon"><img src="Image/product.png" alt="Product" /></span><span>FAQ</span></a>
                    	<ul style="visibility: hidden; display: block;">
							<li><a href="#">Full, Column</a></li>
							<li><a href="#">Full, No Column</a></li>
							<li><a href="#">Fixed, Column</a></li>
							<li class="last"><a href="#">Fixed, No Column</a></li>
						</ul>
                    </li>
                </ul>
            </div>
        </div>
    </div> 
    <div id="content">
    	<div id="menu-left">
        	<div class="menu">
            	<a href="#" onclick="hideLeftMenu()">Hide</a>
            </div>
        	<div class="menu">
            	<h6 class="title">
                    <a href="#"><span>Product</span></a>
                </h6>
                <ul>
                    <li><a href="#">Manage Products</a></li>
                    <li><a href="#">Add Products</a>
                    	<ul>
                        	<li><a href="#">Sales</a>
                            	<ul>
                                    <li><a href="#">Sales</a></li>
                                    <li><a href="#">Offers</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Offers</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="menu">
            	<h6 class="title">
                    <a href="#"><span>Product</span></a>
                </h6>
                <ul>
                    <li><a href="#">Manage Products</a></li>
                    <li><a href="#">Add Products</a></li>
                </ul>
            </div>
            <div class="menu">
            	<h6 class="title">
                    <a href="#"><span>Product</span></a>
                </h6>
                <ul>
                    <li><a href="#">Manage Products</a></li>
                    <li><a href="#">Add Products</a></li>
                </ul>
            </div>
        </div>
        <div id="box">
            <div class="title">
                <h5>Manga Management</h5>
                <div class="button">
                    <input type="submit" value="Add New Managa" class="ui-button"/>
                </div>
            </div>
            <div class="content">
                <div class="tool">
                    <div class="select bgTool">
                        <ul>
                            <li class="title"><b>Select Item</b></li>
                            <li><a href="#"><span>Select All</span></a></li>
                            <li><a href="#"><span>Unselect All</span></a></li>
                            <li><a href="#"><span>Select Visible</span></a></li>
                            <li><a href="#"><span>Unselect All</span></a></li>
                        </ul>
                    </div>
                    <div class="action bgTool">
                        <span><b>Select Action</b></span>
                        <span>
                            <select name="">
                                <option></option>
                                <option>Publish</option>
                                <option>Unpublish</option>
                                <option>Set Category</option>
                            </select>
                        </span>
                        <span><input name="" type="button" value="Action" class="btnAction"/></span>
                    </div>
                </div>
                <div class="table">
                    <form action="" method="post">
                        <table>
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>ID</th>
                                    <th class="txtLeft" id="sort">Name<img src="Image/sort_asc.png" /></th>
                                    <th>Thumbnail</th>
                                    <th class="txtLeft" id="sort">Author<img src="Image/sort_asc.png" /></th>
                                    <th class="txtLeft" id="sort">Publisher<img src="Image/sort_asc.png" /></th>
                                    <th class="txtLeft">Summary</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        
                                    </td>
                                    <td><input type="text" value="" name="" class="hardtv-input-style-2" id="input-full"></td>
                                    <td></td>
                                    <td><input type="text" value="" name="" class="hardtv-input-style-2" id="input-full"></td>
                                    <td><input type="text" value="" name="" class="hardtv-input-style-2" id="input-full"></td>
                                    <td><input type="text" value="" name="" class="hardtv-input-style-2" id="input-full"></td>
                                    <td class="txtCenter">
                                    <select>
                                        <option>DeActive</option>
                                        <option>Active</option>
                                        <option>Any Status</option>
                                     </select>
                                    </td>
                                    <td></td>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="select"><input name="" type="checkbox" value="" /></td>
                                    <td class="id">1</td>
                                    <td class="name">Dung hoi tai sao </td>
                                    <td class="thumbnail">test</td>
                                    <td class="author">test</td>
                                    <td class="publisher">test</td>
                                    <td class="summary">test</td>
                                    <td class="status">Any Status</td>
                                    <td class="action">
                                    	<input type="image" title="Edit" src="Image/Edit.png" width="20" height="20"/>
                                        <input type="image" title="Delete" src="Image/Deletered.png" width="20" height="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="select"><input name="" type="checkbox" value="" /></td>
                                    <td class="id">1</td>
                                    <td class="name">Dung hoi tai sao </td>
                                    <td class="thumbnail">test</td>
                                    <td class="author">test</td>
                                    <td class="publisher">test</td>
                                    <td class="summary">test</td>
                                    <td class="status">Any Status</td>
                                    <td class="action">
                                    	<input type="image" title="Edit" src="Image/Edit.png" width="20" height="20"/>
                                        <input type="image" title="Delete" src="Image/Deletered.png" width="20" height="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="select"><input name="" type="checkbox" value="" /></td>
                                    <td class="id">1</td>
                                    <td class="name">Dung hoi tai sao </td>
                                    <td class="thumbnail">test</td>
                                    <td class="author">test</td>
                                    <td class="publisher">test</td>
                                    <td class="summary">test</td>
                                    <td class="status">Any Status</td>
                                    <td class="action">
                                    	<input type="image" title="Edit" src="Image/Edit.png" width="20" height="20"/>
                                        <input type="image" title="Delete" src="Image/Deletered.png" width="20" height="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="select"><input name="" type="checkbox" value="" /></td>
                                    <td class="id">1</td>
                                    <td class="name">Dung hoi tai sao </td>
                                    <td class="thumbnail">test</td>
                                    <td class="author">test</td>
                                    <td class="publisher">test</td>
                                    <td class="summary">test</td>
                                    <td class="status">Any Status</td>
                                    <td class="action">
                                    	<input type="image" title="Edit" src="Image/Edit.png" width="20" height="20"/>
                                        <input type="image" title="Delete" src="Image/Deletered.png" width="20" height="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="select"><input name="" type="checkbox" value="" /></td>
                                    <td class="id">1</td>
                                    <td class="name">Dung hoi tai sao </td>
                                    <td class="thumbnail">test</td>
                                    <td class="author">test</td>
                                    <td class="publisher">test</td>
                                    <td class="summary">test</td>
                                    <td class="status">Any Status</td>
                                    <td class="action">
                                    	<input type="image" title="Edit" src="Image/Edit.png" width="20" height="20"/>
                                        <input type="image" title="Delete" src="Image/Deletered.png" width="20" height="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="select"><input name="" type="checkbox" value="" /></td>
                                    <td class="id">1</td>
                                    <td class="name">Dung hoi tai sao </td>
                                    <td class="thumbnail">test</td>
                                    <td class="author">test</td>
                                    <td class="publisher">test</td>
                                    <td class="summary">test</td>
                                    <td class="status">Any Status</td>
                                    <td class="action">
                                    	<input type="image" title="Edit" src="Image/Edit.png" width="20" height="20"/>
                                        <input type="image" title="Delete" src="Image/Deletered.png" width="20" height="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="select"><input name="" type="checkbox" value="" /></td>
                                    <td class="id">1</td>
                                    <td class="name">Dung hoi tai sao </td>
                                    <td class="thumbnail">test</td>
                                    <td class="author">test</td>
                                    <td class="publisher">test</td>
                                    <td class="summary">test</td>
                                    <td class="status">Any Status</td>
                                    <td class="action">
                                    	<input type="image" title="Edit" src="Image/Edit.png" width="20" height="20"/>
                                        <input type="image" title="Delete" src="Image/Deletered.png" width="20" height="20"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="select"><input name="" type="checkbox" value="" /></td>
                                    <td class="id">1</td>
                                    <td class="name">Dung hoi tai sao </td>
                                    <td class="thumbnail">test</td>
                                    <td class="author">test</td>
                                    <td class="publisher">test</td>
                                    <td class="summary">test</td>
                                    <td class="status">Any Status</td>
                                    <td class="action">
                                    	<input type="image" title="Edit" src="Image/Edit.png" width="20" height="20"/>
                                        <input type="image" title="Delete" src="Image/Deletered.png" width="20" height="20"/>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </form>
                </div>
                <div class="pagination">
                    <div class="results">
                        <span>showing results 1-10 of 207</span>
                    </div>
                    <div class="page">
                        <ul>
                            <li><a href="#">«prev</a></li>
                            <li class="current"><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">...</a></li>
                            <li><a href="#">20</a></li>
                            <li><a href="#">21</a></li>
                            <li><a href="#">next»</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script language="javascript">
		var minimize = false;
		function hideLeftMenu() {
			if (!minimize) {
				$("#menu-left").animate({
					width:80,			 
				});
				$("#box").animate({
					marginLeft:80,			 
				});
				minimize = true;
			} else {
				$("#menu-left").animate({
					width:220,			 
				});
				$("#box").animate({
					marginLeft:230,			 
				});
				minimize = false;
			}
			return false;
		}
	</script>
</body>
</html>
